<template>
  <div class="operations-message-wrapper">
    <el-form class="query-form"
      ref="queryForm"
      :model="queryParams"
      :inline="true"
      size="small">
        <el-form-item label="项目" prop="appid">
          <el-select v-model="queryParams.appid"
            placeholder="请选择"
            @change="handleQuery"
          >
            <el-option label="全部" :value="null"/>
            <el-option v-for="item in permission_projectList" :key="item.dictValue"
              :label="item.name"
              :value="item.app_id" />
          </el-select>
        </el-form-item>
        <el-form-item label="渠道" prop="union_id">
          <el-select v-model="queryParams.union_id"
            filterable
            placeholder="请选择"
            @change="handleQuery">
            <el-option label="全部" :value="null" />
            <el-option v-for="item in channelOptions"
              :key="item.channel_id"
              :label="`${item.name}(${item.channel_id})`"
              :value="item.channel_id" />
          </el-select>
        </el-form-item>
        <el-form-item label="通知类型" prop="event_type">
          <el-select v-model="queryParams.event_type"
            filterable
            placeholder="请选择"
            @change="handleQuery">
            <el-option label="全部" :value="null" />
            <el-option v-for="item in eventTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value" />
          </el-select>
        </el-form-item>

        <el-form-item class="big-query" label="发布时间">
          <el-date-picker v-model="createdDateRange"
            type="daterange"
            value-format="yyyy-MM-dd"
            range-separator="~"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="handleQuery">
          </el-date-picker>
        </el-form-item>
        <el-form-item class="big-query" label="标题" prop="title">
          <el-input v-model="queryParams.title"
            placeholder="输入通知标题"
            clearable
            size="small"
            style="width: 240px"
            @keyup.enter.native="handleQuery"
            @clear="handleQuery" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary"
            size="small"
            @click="handleQuery">搜索</el-button>
          <el-button size="small"
            @click="resetQuery">重置</el-button>
        </el-form-item>
    </el-form>

    <el-button type="primary"
      style="margin-bottom:10px"
      icon="el-icon-plus"
      size="small"
      @click="handleAdd"
    >
      新增
    </el-button>

    <el-table v-loading="loading" :data="tableList" style="width:100%">
      <el-table-column label="ID" min-width="50" prop="id" />
      <el-table-column label="最低版本" min-width="100" prop="min_version" />
      <el-table-column label="项目范围" min-width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.appid | translateToName(permission_projectList,'app_id','name') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="渠道范围" min-width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.channelStr}}</span>
        </template>
      </el-table-column>
      <el-table-column label="标题" prop="title" />
      <el-table-column label="通知类型"  min-width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.event_type | translateToName(eventTypeOptions)}}</span>
        </template>
      </el-table-column>
      <el-table-column label="发布时间" min-width="100" prop="published_at" />
      <el-table-column label="操作" width="140" fixed="right" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="small" type="text" @click="handleDetail(scope.row, 'edit')">编辑</el-button>
          <el-button size="small" type="text" @click="handleDetail(scope.row, 'view')">查看</el-button>
          <el-button size="small" type="text" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0"
        :total="total"
        layout="total,slot,sizes,prev,pager,next,jumper"
        :page.sync="queryParams.page"
        :limit.sync="queryParams.page_size"
        @pagination="getList" />

    <MessageAddDialog ref="addDialogRef" @update="getList" />
  </div>
</template>

<script>
import { getMessageList, deleteMessage } from '@/api/operations/message'
import { getChannelByAppId } from '@/api/system/channel'
import { mapGetters } from 'vuex'
import MessageAddDialog from './message-add-dialog.vue'

export default {
  name: 'OperationsMessage',
  computed: {
    ...mapGetters('zcsd-core', ['permission_projectList'])
  },
  components: {
    MessageAddDialog
  },
  data () {
    return {
      total: 0,
      // 查询参数
      queryParams: {
        page: 1,
        page_size: 10,
        union_id: null,
        appid: null,
        event_type: null,
        title: null
      },
      createdDateRange: null,
      channelOptions: [],
      eventTypeOptions: [
        {
          label: '更新通知',
          value: 'upgrade'
        },
        {
          label: '活动通知',
          value: 'activity'
        },
        {
          label: '重要提醒',
          value: 'remind'
        }
      ],

      // 表格
      loading: false,
      tableList: null
    }
  },
  methods: {
    resetQuery () {
      this.resetForm('queryForm')
      this.handleQuery()
    },
    handleQuery () {
      this.queryParams.page = 1
      this.getList()
    },
    getListApi () {
      const createdDate = this.addDateRange(this.createdDateRange, 'published_at_begin', 'published_at_end')
      Object.assign(this.queryParams, createdDate)
      this.loading = true
      return new Promise((resolve, reject) => {
        getMessageList(this.queryParams).then(res => {
          const dataList = res?.data?.list?.map(item => {
            if (Array.isArray(item.union_id)) {
              item.channelStr = item.union_id.map(id => this.$root.$options.filters.translateToName(id, this.channelOptions, 'channel_id', 'name')).join(',')
            }
            if (typeof item.union_id === 'string') {
              const union_ids = item.union_id.split(',')
              item.channelStr = union_ids.map(id => this.$root.$options.filters.translateToName(id, this.channelOptions, 'channel_id', 'name')).join(',')
            }
            return item
          })
          console.log('dataList', dataList)
          resolve(dataList)
          this.total = res.data.count || 0
        }).finally(() => {
          this.loading = false
        })
      })
    },

    getList () {
      this.getListApi().then(res => {
        this.tableList = res
      })
    },
    handleAdd () {
      this.$refs.addDialogRef.open()
    },
    handleDelete (item) {
      deleteMessage(item.id).then(res => {
        this.msgSuccess('删除成功')
        this.getList()
      })
    },
    handleDetail (item, type) {
      this.$refs.addDialogRef.open(item.id, type)
    }
  },
  created () {
    const list = this.permission_projectList.map(item => item.app_id)
    getChannelByAppId({ app_ids: list.join(',') }).then(res => {
      this.channelOptions = res.data.list
      this.getList()
    })
  }
}
</script>

<style>

</style>
